import React, { PureComponent } from 'react';
import { Form, Select, Input, Tooltip, DatePicker, Button } from 'antd';
import { Icon } from 'react-fa';
import { SimpeList } from '@/components/Grid';
import Dialog from '@/components/Dialog';
import Card from '@/components/Card'
import Layout from '@/components/Layout';

const ModelForm = () => (
  <Form layout="vertical">
    <Form.Item label="名称">
      <Input placeholder="请输入名称" />
    </Form.Item>
    <Form.Item label="备注">
      <Input.TextArea rows={8} placeholder="请输入至少五个字符" />
    </Form.Item>
  </Form>
);

const SearchForm = () => (
  <Form layout="vertical">
    <Form.Item label="名称">
      <Input placeholder="请输入名称" />
    </Form.Item>
    <Form.Item label="开始时间">
      <DatePicker
        showTime
        placeholder="请选择"
        format="YYYY-MM-DD HH:mm:ss"
        style={{ width: '100%' }}
      />
    </Form.Item>
    <Form.Item label="任务负责人">
      <Select placeholder="请选择">
        <Select.Option value="付晓晓">付晓晓</Select.Option>
        <Select.Option value="周毛毛">周毛毛</Select.Option>
      </Select>
    </Form.Item>
    <Form.Item label="产品描述">
      <Input.TextArea rows={4} placeholder="请输入至少五个字符" />
    </Form.Item>
  </Form>
);

class DemoPage extends PureComponent {
  data = [
    {
      id: 1,
      name: '测试数据',
      crtime: '2019-07-30 10:30:10',
    },
    {
      id: 2,
      name: '看看到底有多长',
      crtime: '2019-07-30 10:30:10',
    },
  ];
  componentDidMount() {}
  handleAdd = e => {
    Dialog.open({
      title: '新建表单',
      fixed: true,
      component: ModelForm,
    });
  };
  showSearchPanel = e => {
    Dialog.drawer({
      title: '高级查询',
      component: SearchForm,
    });
  };
  render() {
    return (
      <Layout
        fixed={false}
        layout="grid"
        toolbar={{
          left: (
            <React.Fragment>
              <Button type="primary" onClick={this.handleAdd}>
                新建
              </Button>
              <Button>编辑</Button>
              <Button type="danger">删除</Button>
            </React.Fragment>
          ),
          right: (
            <Form layout="inline">
              <Input.Search placeholder="请输入要查询的关键词" />
              <Button onClick={this.showSearchPanel}>高级查询</Button>
            </Form>
          ),
        }}
      >
        <SimpeList 
              grid={{
                gutter: 12,
                xs: 1,
                sm: 2,
                md: 2, 
                lg: 4,
                xl: 6,
                xxl: 6
              }}
              data={this.data}
              renderItem={
                item => (
                  <SimpeList.Item 
                    actions={[<Tooltip title="编辑"><Icon name="edit" /></Tooltip>]}>
                    <Card 
                      data={{
                        icon: 'folder-open',
                        name: item.name
                      }}
                      actions={[{
                        icon: 'edit'
                      }, {
                        icon: 'ellipsis'
                      }]} />
                  </SimpeList.Item>
                )
              }
              pagination={{
                pageNumber: 20,
                total: 300
              }}
            />
      </Layout>
    );
  }
}

export default DemoPage;
